<template>
  <div class="company-register-container flex flex-col justify-around h-full">
    <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="0px">
      <!-- 入驻类型选择 -->
      <el-form-item prop="userType" class="border-0">
        <el-select v-model="loginForm.userType" placeholder="入驻类型" class="login-input h-[48px]">
          <el-option
            v-for="item in applyTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="h-[48px]"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="nickname" label="">
        <el-input v-model="loginForm.nickname" placeholder="公司名称" class="h-[48px]">
          <template #prefix>
            <!-- <el-icon><User /></el-icon> -->
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="mallCode">
        <!-- <el-select v-model="loginForm.mallCode" placeholder="所在商圈">
          <el-option
            v-for="item in mallList"
            :key="item.id"
            :label="item.mallName"
            :value="item.id"
          />
        </el-select> -->
        <el-input v-model="loginForm.mallCode" placeholder="编码" class="login-input h-[48px]" />
      </el-form-item>
      <el-form-item label="" prop="phonenumber">
        <el-input
          v-model="loginForm.phonenumber"
          placeholder="手机号"
          maxlength="11"
          class="login-input h-[48px]"
        >
          <template #prefix>
            <!-- <el-icon><User /></el-icon> -->
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="code">
        <el-input v-model="loginForm.code" placeholder="验证码" class="login-input h-[48px]">
          <template #append>
            <CodeButton
              smsType="REGISTER"
              :mobile="loginForm.phonenumber"
              :validateFunction="validateFunction"
              @getCode="(code) => (loginForm.code = code)"
            />
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <RegisterButton :loading="loading" @submit="submitForm" @register="emit('register')" />
    <Summary ref="summaryRef" @confirm="handleConfirm" @cancel="handleCancel"></Summary>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { getCodeSms } from "../utils/settle";
import { addCompanyUser, getMall } from "@/api/register";
import { applyTypeList } from "../utils/enum";
import RegisterButton from "../components/RegisterButton.vue";
import Summary from "@/views/login/components/summary.vue";
const loginFormRef = ref(null);
const emit = defineEmits(["register", "registerSuccess"]);
const loginForm = reactive({
  userType: "",
  nickname: "",
  phonenumber: "",
  mallCode: undefined,
  code: "",
  // agreement: false
});
const rules = {
  nickname: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 20, message: "姓名长度应在2-10个字符之间", trigger: "blur" },
  ],
  userType: [{ required: true, message: "请选择入驻类型", trigger: "blur" }],
  mallCode: [{ required: true, message: "请输入编码", trigger: "blur" }],
  phonenumber: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
  ],
  code: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { len: 6, message: "验证码应为6位", trigger: "blur" },
  ],
};
const validateFunction = async (mobile) => {
  const result = await loginFormRef.value?.validateField("phonenumber", (valid) => {
    if (valid) {
      console.log("valid");
      return true;
    } else {
      ElMessage.error("请输入有效的手机号码");
      return false;
    }
  });
  console.log(result);
  return result;
};
const reallyCode = ref("");
const loading = ref(false);
const isCounting = ref(false);
const countDown = ref(60);
const summaryRef = ref();
const isAgree = ref(false);
const mallList = ref([]);

const sendCode = () => {
  if (!loginForm.phonenumber) {
    ElMessage.error("请输入手机号");
    return;
  }
  if (!rules.phonenumber[1].pattern.test(loginForm.phonenumber)) {
    ElMessage.error("手机号格式不正确");
    return;
  }
  getCodeSmsFunc();
};
const getCodeSmsFunc = async () => {
  try {
    const res = await getCodeSms(loginForm.phonenumber);
    reallyCode.value = res;
    // 模拟发送验证码
    ElMessage.success("验证码发送成功，请注意查收");
    isCounting.value = true;
    const interval = setInterval(() => {
      countDown.value--;
      if (countDown.value <= 0) {
        clearInterval(interval);
        isCounting.value = false;
        countDown.value = 60;
      }
    }, 1000);
  } catch (error) {
    console.log(error, "error");
    isCounting.value = false;
  }
};
const handleConfirm = () => {
  isAgree.value = true;
  submitMerchantSettleFunc();
};
const handleCancel = () => {
  isAgree.value = false;
};

const submitForm = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      if (!isAgree.value) {
        summaryRef.value.showModal();
      } else {
        submitMerchantSettleFunc();
      }
    } else {
      // ElMessage.error('表单验证失败');
    }
  });
};
async function submitMerchantSettleFunc() {
  try {
    loading.value = true;
    const res = await addCompanyUser(loginForm);
    ElMessage.success("申请入驻成功，请登录填写资质信息");
    emit("registerSuccess");
  } catch (error) {
    console.log(error, "error");
  } finally {
    loading.value = false;
  }
}

async function getMalls() {
  try {
    const res = await getMall();
    mallList.value = res.data;
  } catch (error) {}
}

onMounted(() => {
  //getApplyListFunc()
  getMalls();
});
</script>

<style scoped lang="scss">
.company-register-container {
  :deep(.el-select__wrapper) {
    height: 48px !important;
    border: 0;
  }
  .el-form-item {
    margin-bottom: 5%;
  }
  .border-0 {
    border: 0;
  }
  :deep(.el-input-group__append) {
    border: 2px solid #eee;
  }
}
</style>
